<script setup lang="ts">
import { useEcharts } from "@/hooks/useEchartsDatav";
import { reactive } from "vue";

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title?: string;
    subtitle?: string;
    data?: number[]; // 曲线数据
    xAxisData?: string[]; // x轴数据
  }>(),
  {
    width: "100%",
    height: "250px",
    data: () => [],
  }
);

// 柱状图选项
const option = reactive({
  backgroundColor: "transparent",
  title: {
    text: props.title,
    subtext: props.subtitle,
    x: "left",
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: '10%',
    top: '10%',
    right: '4%',
    bottom: '10%',
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['11-01', '11-02', '11-03', '11-04', '11-05'],
      axisLabel: {
            color: '#fff',
        },
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
            color: '#fff',
        },
    }
  ],
  series: [
    {
      name: "Forest",
      type: "bar",
      barGap: 0,
      data: [320, 332, 301, 334, 390],
    },
    {
      name: "Steppe",
      type: "bar",
      data: [220, 182, 191, 234, 290],
    },
    {
      name: "Desert",
      type: "bar",
      data: [150, 232, 201, 154, 190],
    },
    {
      name: "Wetland",
      type: "bar",
      data: [98, 77, 101, 99, 40],
    },
  ],
});

const { chartRef } = useEcharts({ props, option });
</script>

<template>
  <div
    ref="chartRef"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>

<style scoped></style>
